<template>
	<view>
		<view class="loadingIcon">
			<block v-if="loading">
				<view class='sk-fading-circle'>
					<view class='sk-circle sk-circle-1'></view>
					<view class='sk-circle sk-circle-2'></view>
					<view class='sk-circle sk-circle-3'></view>
					<view class='sk-circle sk-circle-4'></view>
					<view class='sk-circle sk-circle-5'></view>
					<view class='sk-circle sk-circle-6'></view>
					<view class='sk-circle sk-circle-7'></view>
					<view class='sk-circle sk-circle-8'></view>
					<view class='sk-circle sk-circle-9'></view>
					<view class='sk-circle sk-circle-10'></view>
					<view class='sk-circle sk-circle-11'></view>
					<view class='sk-circle sk-circle-12'></view>
				</view>
			</block>
			<block v-else>
				<view class="noDataTips">
					<text>——</text>
					<text>我是有底线的</text>
					<text>——</text>
				</view>
			</block>
		</view> 
	</view>
</template>

<script>
	export default {
		props:{
			loading : {
				type : Boolean
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	
	.sk-fading-circle {
	  width: 2.6em;
	  height: 2.6em;
	  position: relative;
	  margin:10rpx auto 0;
	}
	.sk-fading-circle .sk-circle {
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  left: 0;
	  top: 0;
	}
	.sk-fading-circle .sk-circle:before {
	  content: '';
	  display: block;
	  margin: 0 auto;
	  width: 15%;
	  height: 15%;
	  background-color: #ffa510;
	  border-radius: 100%;
	  -webkit-animation: sk-fading-circle-delay 1.2s infinite ease-in-out both;
	          animation: sk-fading-circle-delay 1.2s infinite ease-in-out both;
	}
	.sk-fading-circle .sk-circle-2 {
	  -webkit-transform: rotate(30deg);
	          transform: rotate(30deg);
	}
	.sk-fading-circle .sk-circle-3 {
	  -webkit-transform: rotate(60deg);
	          transform: rotate(60deg);
	}
	.sk-fading-circle .sk-circle-4 {
	  -webkit-transform: rotate(90deg);
	          transform: rotate(90deg);
	}
	.sk-fading-circle .sk-circle-5 {
	  -webkit-transform: rotate(120deg);
	          transform: rotate(120deg);
	}
	.sk-fading-circle .sk-circle-6 {
	  -webkit-transform: rotate(150deg);
	          transform: rotate(150deg);
	}
	.sk-fading-circle .sk-circle-7 {
	  -webkit-transform: rotate(180deg);
	          transform: rotate(180deg);
	}
	.sk-fading-circle .sk-circle-8 {
	  -webkit-transform: rotate(210deg);
	          transform: rotate(210deg);
	}
	.sk-fading-circle .sk-circle-9 {
	  -webkit-transform: rotate(240deg);
	          transform: rotate(240deg);
	}
	.sk-fading-circle .sk-circle-10 {
	  -webkit-transform: rotate(270deg);
	          transform: rotate(270deg);
	}
	.sk-fading-circle .sk-circle-11 {
	  -webkit-transform: rotate(300deg);
	          transform: rotate(300deg);
	}
	.sk-fading-circle .sk-circle-12 {
	  -webkit-transform: rotate(330deg);
	          transform: rotate(330deg);
	}
	.sk-fading-circle .sk-circle-2:before {
	  -webkit-animation-delay: -1.1s;
	          animation-delay: -1.1s;
	}
	.sk-fading-circle .sk-circle-3:before {
	  -webkit-animation-delay: -1s;
	          animation-delay: -1s;
	}
	.sk-fading-circle .sk-circle-4:before {
	  -webkit-animation-delay: -0.9s;
	          animation-delay: -0.9s;
	}
	.sk-fading-circle .sk-circle-5:before {
	  -webkit-animation-delay: -0.8s;
	          animation-delay: -0.8s;
	}
	.sk-fading-circle .sk-circle-6:before {
	  -webkit-animation-delay: -0.7s;
	          animation-delay: -0.7s;
	}
	.sk-fading-circle .sk-circle-7:before {
	  -webkit-animation-delay: -0.6s;
	          animation-delay: -0.6s;
	}
	.sk-fading-circle .sk-circle-8:before {
	  -webkit-animation-delay: -0.5s;
	          animation-delay: -0.5s;
	}
	.sk-fading-circle .sk-circle-9:before {
	  -webkit-animation-delay: -0.4s;
	          animation-delay: -0.4s;
	}
	.sk-fading-circle .sk-circle-10:before {
	  -webkit-animation-delay: -0.3s;
	          animation-delay: -0.3s;
	}
	.sk-fading-circle .sk-circle-11:before {
	  -webkit-animation-delay: -0.2s;
	          animation-delay: -0.2s;
	}
	.sk-fading-circle .sk-circle-12:before {
	  -webkit-animation-delay: -0.1s;
	          animation-delay: -0.1s;
	}
	
	@-webkit-keyframes sk-fading-circle-delay {
	  0%, 39%, 100% {
	    opacity: 0;
	  }
	  40% {
	    opacity: 1;
	  }
	}
	
	@keyframes sk-fading-circle-delay {
	  0%, 39%, 100% {
	    opacity: 0;
	  }
	  40% {
	    opacity: 1;
	  }
	}
	.loadingIcon{
		width: 100%;
		height: 90rpx;
		font-size: 26rpx;
	}
	.loadingIcon .noDataTips{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #dcdcdc;
	}
</style>
